<template>
  <div id="app">
    <span style="color:red">{{countDown$}}</span>
    <br>
    <h1>支线</h1>
    {{test}}
  </div>
</template>

<script lang="ts">
import * as rx from "rxjs";
import * as ops from "rxjs/operators";
export default {
  name: "app",
  data(){
    return {
      lrx:''
    }
  },
  subscriptions() {
    return {
      countDown$: rx
        .interval(1000)
        .pipe(
          ops.startWith(4),
          ops.scan(s => s - 1),
          //filter(s => s % 2 === 0),
          ops.takeWhile(s => s > 0),
          ops.endWith(rx.of("故事已完结!"))
        )
        .pipe(
          ops.delay(1000),
          ops.startWith("主要的故事线....")
        ),
      test: rx
        .of("hi", "how are you?", "sorry, I have to go now", "good bye","支线已完结")
        .pipe(
          ops.startWith("这是另外一个故事线"),
          ops.concatMap((item, i) =>
            rx.of(item).pipe(ops.delay(i === 0 ? 0 : Math.random()*1000+500))
          )
        )
    };
  }
};
</script>

<style lang="stylus">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3eff;
  margin-top: 60px;
}
</style>
